<template>
  <section class="my-order">
    <div class="flex top-tab">
      <div
        :class="topIndex == index?'active':''"
        v-for="(item,index) in topTab"
        @click="topIndex=index"
        :key="index"
      >{{item}}</div>
    </div>
    <div v-if="topIndex==0">
      <van-tabs :border="false" :active="activeShop" @change="onChange" :swipe-threshold="5">
        <van-tab :title="item" v-for="(item,index) in shopTabs" :key="index">
          <!-- 单个商品卡片 -->
          <div class="commodity" v-for="(itemm,i) in orderList" :key="i">
            <div class="status">{{itemm.statusName}}</div>
            <div class="content" v-for="(val,ind) in itemm.productList" :key="ind">
              <van-row>
                <van-col span="8">
                  <img :src="val.frontPicUrl" />
                </van-col>
                <van-col span="16" class="left">
                  <div class="title van-multi-ellipsis--l2">{{val.productName}}</div>
                  <div class="mt15 desc">{{val.colorName}}</div>
                  <div class="flex mt10 flex-between">
                    <div class="price">￥{{val.price}}</div>
                    <div class="num">X{{val.buyNums}}</div>
                  </div>
                </van-col>
              </van-row>
            </div>
            <div class="total flex flex-between mt15 flex-middle">
              <div class="piece">共{{itemm.orderCount}}件商品</div>
              <div>
                <span class="heji">合计</span>
                <span class="price">￥{{itemm.totalAmt}}</span>
              </div>
            </div>
            <div class="btns mt15">
              <button class="detail" @click="routerTo(itemm.orderId)">查看详情</button>
              <button class="pay" v-if="itemm.orderStatus==0">去支付</button>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div v-else>2</div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      topIndex: 0,
      topTab: ["商城订单", "跑腿订单"],
      activeShop: 0, //商城下tab
      shopTabs: ["全部", "待支付", "待收货", "已完成", "退款售后"],
      activeRun: 1,
      orderStatus: "", //订单状态
      pageSize: 10,
      pageNum: 1,
      orderList: []
    };
  },
  onLoad() {
    this.getOrderList();
  },
  onReachBottom() {
    this.getOrderList();
  },
  methods: {
    getOrderList() {
      this.$api
        .getOrderList({
          orderStatus: this.orderStatus,
          pageSize: 10,
          pageNum: this.pageNum
        })
        .then(res => {
          if (res.data.orderList.length > 0) {
            this.orderList = this.orderList.concat(res.data.orderList);
            this.pageNum++;
          }
        });
    },
    onChange(e) {
      switch (e.target.index) {
        case 0:
          this.orderStatus = "";
          this.initData();
          this.getOrderList();
          break;
        case 1:
          this.orderStatus = "0";
          this.initData();
          this.getOrderList();
          break;
        case 2:
          this.orderStatus = "2";
          this.initData();
          this.getOrderList();
          break;
        case 3:
          this.orderStatus = "3";
          this.initData();
          this.getOrderList();
          break;
        case 4:
          this.orderStatus = "5";
          this.initData();
          this.getOrderList();
          break;
      }
    },
    initData() {
      this.pageNum = 1;
      this.orderList=[];
    },
    routerTo(id) {
      wx.navigateTo({ url: "../orderdetail/main?orderId=" + id });
    }
  }
};
</script>
<style lang="scss" scoped>
.my-order {
  .top-tab {
    margin: 10px 17px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(59, 184, 253, 1);
    div {
      height: 40px;
      flex: 1;
      line-height: 40px;
      text-align: center;
      font-size: 15px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(59, 184, 253, 1);
    }
    .active {
      background: #3bb8fd;
      color: rgba(255, 255, 255, 1);
    }
  }
  .commodity {
    border-top: 15px solid #f7f7f7;
    background: white;
    padding: 15px 20px;
    .status {
      text-align: right;
      font-size: 15px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(59, 184, 253, 1);
      line-height: 13px;
    }
    .content {
      padding: 15px 0;
      border-bottom: 1px solid #f7f7f7;
      img {
        width: 100px;
        height: 100px;
        border-radius: 4px;
      }
      .left {
        .title {
          font-size: 14px;
          font-family: PingFang;
          font-weight: 500;
          color: rgba(46, 46, 46, 1);
          line-height: 24px;
        }
        .desc {
          font-size: 12px;
          font-family: PingFang;
          font-weight: 500;
          color: rgba(193, 196, 201, 1);
        }
        .price {
          font-size: 15px;
          font-family: DIN;
          font-weight: 500;
          color: rgba(255, 156, 0, 1);
          line-height: 22px;
        }
        .num {
          font-size: 15px;
          font-family: PingFang;
          font-weight: 500;
          color: rgba(46, 46, 46, 1);
          line-height: 21px;
        }
      }
    }
    .total {
      .piece {
        font-size: 15px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(46, 46, 46, 1);
        line-height: 21px;
      }
      .heji {
        font-size: 12px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(46, 46, 46, 1);
        line-height: 36px;
      }
      .price {
        font-size: 18px;
        font-family: DIN;
        font-weight: 500;
        color: rgba(46, 46, 46, 1);
        line-height: 22px;
      }
    }
    .btns {
      text-align: right;
      button {
        width: 60px;
        height: 24px;
        line-height: 24px;
        border-radius: 5px;
        font-size: 12px;
        font-family: PingFang;
        font-weight: 500;
        padding: 0;
        display: inline-block;
      }
      .detail {
        color: rgba(193, 196, 201, 1);
      }
      .pay {
        background: rgba(59, 184, 253, 1);
        color: rgba(255, 255, 255, 1);
        margin-left: 15px;
      }
    }
  }
}
</style>
<style lang="scss">
.my-order {
  .van-tabs__line {
    background: #3bb8fd;
  }
}
</style>